<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>影院后台管理系统</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<style type="text/css">
			.main {
				width: 100%;
				height: 530px;
			}

			.main1 {
				width: 900px;
				height: 530px;
				border: #DCDCDC 1px dashed;
				margin: 18px 20px 0px 20px;
				float: left;
			}

			.main2 {
				float: left;
				width: 200px;
				height: 530px;
				border: #DCDCDC 1px dashed;
				margin: 18px 0px 0px 0px;
			}
		</style>
	<title>影院后台管理系统</title>
	</head>
	<body>
		<body class="layui-layout-body">
			<div class="layui-layout layui-layout-admin">
				<div class="layui-header">
					<div class="layui-logo">酒店后台管理系统</div>
					<!-- 头部区域（可配合layui已有的水平导航） -->
					<ul class="layui-nav layui-layout-right">
						<li class="layui-nav-item"><a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心
							</a>
							<dl class="layui-nav-child">
								<!-- <dd><a href="">消息<span class="layui-badge">99+</span></a></dd> -->
							</dl>
						</li>
						<li class="layui-nav-item"><a href="logout">退了</a></li>
					</ul>
				</div>

				<div class="layui-side layui-bg-black">
					<div class="layui-side-scroll">
						<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
						<ul class="layui-nav layui-nav-tree"  lay-filter="test">
					        <li class="layui-nav-item layui-nav-itemed">
					          <a href="movieSystem.html">主页(统计信息)</a>
					        </li>
					       <li class="layui-nav-item">
					          <a href="businessManagement.html">营业管理</a>
					        </li>
					        <li class="layui-nav-item layui-nav-itemed">
					          <a href="javascript:;">影院管理</a>
					          <dl class="layui-nav-child">
					          	<dd><a href="moiveinfo.html">总影院详情</a></dd>
					            <dd><a href="mymoivesystem.html">分影院管理</a></dd>
					            <dd><a href="halllist.html">影厅管理</a></dd>
					            <dd><a href="movies.html">影片管理</a></dd>
								<dd><a href="hall.html">添加影厅</a></dd>
								<dd class="layui-this"><a href="arrange.html">排片</a></dd>
					        	<dd><a href="uploadvideo.html">上传影片</a></dd>
					          </dl>
					        </li>
					        <li class="layui-nav-item"><a href="feedback.html">信息反馈</a></li>
					      </ul>
					</div>
				</div>

				<div class="layui-body" style="background-color: #F2F2F2;">
					<!-- 内容主体区域 -->
					<input type="hidden" id="userName" value="后台">
					<div class="main">
						<div class="layui-row layui-col-space15" style="width:40%;height: 480px; margin-top: 30px;margin-left:70px;float: left;">
							<div class="layui-col-md6" style="width:100%;height: 100%;">
								<div class="layui-card" style="width:100%;height: 100%;">
									<div class="layui-card-header" style="height: 400px;">
										<form class="layui-form layui-form-pane" action="">
											<div class="layui-form-item">
												<div class="layui-inline" style="margin-top: 30px;">
													<label class="layui-form-label" style="width: 110px;">日期选择</label>
													<div class="layui-input-block" style="width: 200px;">
														<input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
													</div>
												</div>
											</div>
											<div class="layui-form-item" style="margin: 0px;height: 55px;">
												<label class="layui-form-label" style="width: 110px;">选择映点</label>
												<div class="layui-input-inline" style="width: 130px;">
													<select name="cinema" lay-filter="cinema" id="cinema" lay-ignore="true"
													style="width: 120px;height: 38px;border-color: #E8E8E8;" onChange="showHall(this.options[this.options.selectedIndex].value)">
														<option value="">选择影院</option>
													</select>
												</div>
												<div class="layui-input-inline" style="width: 130px;">
													<select name="hall" lay-filter="hall" id="hall" lay-ignore="true"
													style="width: 120px;height: 38px;border-color: #E8E8E8;">
														<option value="">选择影厅</option>
													</select>
												</div>
											</div>
											<div class="layui-form-item" style="margin: 0px;height: 58px;">
												<label class="layui-form-label" lay-ignore="true"
													style="width: 110px;height: 39px;">选择电影</label>
												<div class="layui-input-inline" style="width: 200px;">
													<select name="movie" id="movie" lay-ignore="true"
													style="width: 200px;height: 39px;border-color: #E8E8E8;" onChange="changeMovie()">
														<option value="">---请选择---</option>
													</select>
												</div>
											</div>


											<div class="layui-form-item">
												<div class="layui-inline">
													<label class="layui-form-label">开始时间</label>
													<div class="layui-input-inline" style="width: 200px;font-size: 15px;">
														<input type="text" class="layui-input" id="test4" placeholder="HH:mm:ss">
													</div>
												</div>
											</div>
											
											<div class="layui-form-item" style="margin: 0px;height: 58px;">
												<label class="layui-form-label" lay-ignore="true"
													style="width: 110px;height: 38px;">结束时间</label>
												<div id="end" class="layui-input-inline" style="width: 200px;font-size: 15px;padding-left: 10px;">
												~ 请选择影片开始时间
												</div>
											</div>
											
											<div class="layui-form-item" style="margin: 0px;height: 58px;">
												<label class="layui-form-label" lay-ignore="true"
													style="width: 150px;height: 38px;">设定票价（元）</label>
												<div class="layui-input-inline" style="width: 200px;font-size: 15px;">
													<input id="price" style="width: 50px"  type="text" name="price" lay-verify="title" autocomplete="off" class="layui-input">
												</div>
											</div>
										</form>
									</div>
									<div class="layui-card-body" style="text-align: center;">
										<button type="button" class="layui-btn layui-btn-primary layui-btn-radius" onclick="showArrange()">显示排片</button>
										&nbsp;&nbsp;&nbsp;&nbsp;
										<button type="button" class="layui-btn layui-btn-radius" style="background-color:khaki;" onclick="addArrange()">添加排片</button>
									</div>
								</div>
							</div>
						</div>


						<div class="layui-row layui-col-space15" style="width:35%;height: 480px; margin-top: 30px;margin-left:20px;float: left;">
							<div class="layui-col-md6" style="width:100%;height: 100%;">
								<div class="layui-card" style="width:100%;height: 100%;border-radius: 50px;">
									<div class="layui-card-header" style="height: 60px;overflow:auto;">
										
										<div style="height: 50px;width: 100%;line-height: 60px;font-size: 15px; text-align: center;" id="title">请选择日期与影厅：</div>
										
									</div>
									
									<div class="layui-card-body" style="text-align: center;">
										<!-- <button type="button" class="layui-btn layui-btn-warm" style="background-color: #69BC80;">提交修改</button> -->
										<table id="arranges" class="layui-table" lay-even="" lay-skin="nob" style="text-align: center;">
											 <colgroup>
												<col width="180">
												<col width="180">
												<col width="80">
											</colgroup>
											<thead>
												<tr>
													<th style="text-align:center;">影片名</th>
													<th style="text-align:center;">时间</th>
													<th style="text-align:center;">操作</th>
												</tr>
											</thead> 
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="layui-footer">
						<!-- 底部固定区域 -->
						© 版权归影院所有
					</div>
				</div>

				<script src="layui/layui.all.js"></script>
				<script>
					layui.use('element', function() {
						var element = layui.element;

						//一些事件监听
						element.on('tab(demo)', function(data) {
							console.log(data);
						});
					});
				</script>
				<script src="layui/layui.js" charset="utf-8"></script>
				<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
				<script>
					layui.use(
						['form', 'layedit', 'laydate'],
						function() {
							var form = layui.form,
								layer = layui.layer,
								layedit = layui.layedit,
								laydate = layui.laydate;
						});
					layui.use(['form', 'layedit', 'laydate'], function() {
						var form = layui.form,
							layer = layui.layer,
							layedit = layui.layedit,
							laydate = layui.laydate;
						
						//动态渲染select
						form.render('select');
						//日期
						laydate.render({
							elem: '#date'
						});
						
						//创建一个编辑器
						var editIndex = layedit.build('LAY_demo_editor');

						//自定义验证规则
						form.verify({
							title: function(value) {
								if (value.length < 5) {
									return '标题至少得5个字符啊';
								}
							},
							pass: [
								/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
							],
							content: function(value) {
								layedit.sync(editIndex);
							}
						});

						//监听指定开关
						form.on('switch(switchTest)', function(data) {
							layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
								offset: '6px'
							});
							layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
						});

						//监听提交
						form.on('submit(demo1)', function(data) {
							layer.alert(JSON.stringify(data.field), {
								title: '最终的提交信息'
							})
							return false;
						});

						//表单赋值
						layui.$('#LAY-component-form-setval').on('click', function() {
							form.val('example', {
								"username": "贤心" // "name": "value"
									,
								"password": "123456",
								"interest": 1,
								"like[write]": true //复选框选中状态
									,
								"close": true //开关状态
									,
								"sex": "女",
								"desc": "我爱 layui"
							});
						});

						//表单取值
						layui.$('#LAY-component-form-getval').on('click', function() {
							var data = form.val('example');
							alert(JSON.stringify(data));
						});
						
					});
				</script>

				<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
				<script type="text/javascript">
					var yid;
					var day;
					var tstart;
					var vstart;
					var tend;
					var flag=0;
					var timeflag=0;
					
					$(function() {
						showCinema();
						showMovie();
					});
					function showCinema(){
						$.ajax({
							url:"/movie/cinema",
							type:"get",
							success:function(data){
								var content='';
								for(var i=0;i<data.length;i++){
									content+='<option value="'+data[i].yid+'">'+data[i].yname+'</option>';
								}
								$("#cinema").append(content);
							}
						});
					}
					
					function showMovie(){
						$.ajax({
							url:"/movie/movies",
							type:"get",
							success:function(data){
 								var content='';
								for(var i=0;i<data.length;i++){
									content+='<option value="'+data[i].id+'">'+data[i].mname+'('+data[i].mlength+'分钟)</option>';
								}
								$("#movie").html(content); 
							}
						});
					}
					
					function showHall(yyid){
						$.ajax({
							url:"/movie/hall/"+yyid,
							type:"get",
							success:function(data){
								var content='';
								for(var i=0;i<data.length;i++){
									content+='<option value="'+data[i].ytid+'">'+data[i].ytname+'</option>';
								}
								$("#hall").html(content);
							}
						});
					}
					
					function changeMovie(){
						$("#test4").val("");
						var content='~ 请选择影片开始时间';
						$("#end").html(content); 
						timeflag=0;
					}
					
					layui.use('laydate', function() {
						var laydate = layui.laydate;
						day=$("#date1").val();
						
						laydate.render({
							elem: '#date1'
							,min: 0
							,done: function(value, date){
								day = date;
								vstart = value;
								flag=1;
								changeMovie();
							 }
						});
						
						laydate.render({
							  elem: '#test4'
							  ,type:'time'
							  ,done: function(value, date){
								if(flag==1){
									var s=$('#movie option:selected').text();
									var x=s.indexOf('(')+1;
									var y=s.indexOf('分');
									var min=parseInt(s.substring(x,y));
									tstart=new Date(day.year, day.month, day.date, date.hours, date.minutes, date.seconds);
									tend=new Date();
									tend.setTime(tstart.getTime()+min*60*1000);
									var c = '~ '+tend.toTimeString();
									c = c.substring(0,11);
									
									timeflag=1;
								 	$("#end").html(c); 	
								}else{
									alert("请先选择日期  再选择时间！");
								}
								
							  }
							});
					});
					
					function showArrange(){
						var c=$('#cinema option:selected').val();
						var h=$('#hall option:selected').val();
						if(flag==1 && h!="" && c!=""){
							$.ajax({
								url:"/movie/arrange/search",
								type:"post",
								data:{
									vstart:vstart,
									yid:$('#cinema option:selected').val(),
									ytid:$('#hall option:selected').val()
								},
								success:function(data){
									var content2='<colgroup><col width="180"><col width="180"><col width="80"></colgroup>'
											+'<thead><tr><th style="text-align:center;">影片名</th><th style="text-align:center;">时间</th>'
											+'<th style="text-align:center;">操作</th></tr></thead><tbody>';
									for(var i=0;i<data.length;i++){
										var po=data[i];
										content2+='<tr><td>'+po.mname+'</td>'
												+'<td>'+data[i].pstart+' - '+data[i].pend+'</td>'
												+'<td onclick="dele('+po.id+')"><button type="button" class="layui-btn layui-btn-sm" style="background-color: #69BC80;">'
												+'删除</button></td></tr>';
									}
									content2+='/<tbody>'
									$("#arranges").html(content2);
									var content3=vstart+' '+$('#cinema option:selected').text()+' '+$('#hall option:selected').text();
									$("#title").html(content3);
								} 
							});   
						}else if(flag==1){
							alert("请选择影院影厅！");
						}else if(h=="" || c=="" &&flag==1){
							alert("请选择日期！");
						}else{
							alert("请选择影厅和日期！");
						}
					}
					
 					function addArrange(){
 						var c=$('#cinema option:selected').val();
 						var h=$('#hall option:selected').val();
 						var p=$("#price").val().length;
 						
						if(flag==1 && h!="" && c!="" && timeflag!=0 && p!=0){
							$.ajax({
								url:"/movie/arrange",
								type:"post",
								data:{
									mid:$('#movie option:selected').val(),
									yid:$('#cinema option:selected').val(),
									pstart:tstart,
									pend:tend,
									pprice:$('#price').val(),
									ytid:$('#hall option:selected').val()
								},
								success:function(data){
									alert(data);
									showArrange();
			    				}
							});
						}else{
							alert("信息未填写完全！");
						}
					}
 					
 					function dele(cid){
 						$.ajax({
							url:"/movie/arrange/"+cid,
							type:"delete",
							success:function(data){
								alert(data);
								showArrange();
		    				}
						});
 					}
				</script>
		</body>
</html>
